<template>
  <div>
    <div class="filter-container">
      <el-date-picker
        v-model="temp.date"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      />
      <el-select v-model="temp.equipmentNumber" style="width: 220px; margin-left: 20px; margin-top: 6px;" class="filter-item" placeholder="设备编号">
        <el-option v-for="item in equipmentNumberOptions" :key="item.key" :label="item.label" :value="item.value" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;margin-bottom:3px" @click="handleUpdataLineChart">
        查询
      </el-button>
    </div>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
  </div>
</template>

<script>
import echarts from 'echarts'
import waves from '@/directive/waves' // waves directive
import resize from '@/components/Charts/mixins/resize'
import { updateLineChart } from '@/api/equipment-lineChart'
import { fetchEquipmentNumberOptions } from '@/api/dataManagement'
require('echarts/theme/macarons')
export default {
  directives: { waves },
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '530px'
    },
    pnumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          var isSelected = false
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            isSelected = time.getTime() <= minTime || time.getTime() > maxTime
          }
          return isSelected || time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: [{
          text: '最近1小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近12小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      equipmentNumberOptions: '',
      chart: null,
      temp: {
        date: null, // 数组时间戳
        equipmentNumber: '' // 设备编号
      },
      i1data: [['2019-08-14T16:00:00.000Z', -1], ['2019-08-14T17:00:00.000Z', -1.2], ['2019-08-14T18:00:00.000Z', -1.3], ['2019-08-14T19:00:00.000Z', -2]],
      i2data: [['2019-08-14T16:00:00.000Z', -2], ['2019-08-14T17:00:00.000Z', -2], ['2019-08-14T18:00:00.000Z', -1.2], ['2019-08-14T19:00:00.000Z', -1.1]],
      i3data: [['2019-08-14T16:00:00.000Z', -10], ['2019-08-14T17:00:00.000Z', -66], ['2019-08-14T18:00:00.000Z', -35], ['2019-08-14T19:00:00.000Z', -80]],
      i4data: [['2019-08-14T16:00:00.000Z', -103], ['2019-08-14T17:00:00.000Z', -166], ['2019-08-14T18:00:00.000Z', -114], ['2019-08-14T19:00:00.000Z', -103]]
    }
  },
  beforeCreate() {
  },
  created() {
    this.getEquipmentNumberOptions()
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getEquipmentNumberOptions() {
      fetchEquipmentNumberOptions().then((res) => {
        this.equipmentNumberOptions = res.data.equipmentNumberOptions
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 提交数据时间数据和设备编号得到相应数据
    handleUpdataLineChart() {
      updateLineChart(this.$data.temp).then(response => {
        this.i1data = response.data.i1data
        this.i2data = response.data.i2data
        this.i3data = response.data.i3data
        this.i4data = response.data.i4data
        // Just to simulate the time of the request
        console.log(this.i1data)
        // setTimeout(() => {
        //   this.listLoading = false
        // }, 1.5 * 1000)
        this.initChart()
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      window.onresize = this.chart.resize
      this.chart.setOption({
        backgroundColor: '#394056',
        title: {
          top: 20,
          text: '数据曲线图',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#F1F1F3'
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['通道1', '通道2', '通道3', '通道4'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [{
          name: '实时',
          type: 'time',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          name: '通道1、2数据',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        {
          type: 'value',
          name: '通道3、4数据',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        dataZoom: [{
          show: true,
          height: 25,
          xAxisIndex: [
            0
          ],
          bottom: 20,
          start: 0,
          end: 100,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'

          },
          textStyle: {
            color: '#fff' },
          borderColor: '#90979c'

        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        series: [{
          // 添加警戒线
          markLine: {
            symbol: 'none', // 去掉警戒线最后面的箭头
            label: {
              position: 'middle', // 将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
              formatter: '警戒线'
            },
            data: [{
              silent: false, // 鼠标悬停事件  true没有，false有
              lineStyle: { // 警戒线的样式  ，虚实  颜色
                type: 'solid',
                color: 'rgba(238, 99, 99)'
              },
              name: '警戒线',
              yAxis: 0.9
            }]
          },
          name: '通道1',
          type: 'line',
          smooth: true,
          yAxisIndex: 0,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(137, 189, 27, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(137, 189, 27, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(137,189,27)',
              borderColor: 'rgba(137,189,2,0.27)',
              borderWidth: 12
            }
          },
          data: this.i1data
        }, {
          name: '通道2',
          type: 'line',
          yAxisIndex: 0,
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 136, 212, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 136, 212, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,136,212)',
              borderColor: 'rgba(0,136,212,0.2)',
              borderWidth: 12

            }
          },
          data: this.i2data
        }, {
          name: '通道3',
          type: 'line',
          yAxisIndex: 1,
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 36, 42, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 36, 42, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,36,42)',
              borderColor: 'rgba(0,36,42,0.2)',
              borderWidth: 12

            }
          },
          data: this.i3data
        }, {
          name: '通道4',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219, 50, 51, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)',
              borderColor: 'rgba(219,50,51,0.2)',
              borderWidth: 12
            }
          },
          data: this.i4data
        }]
      })
    }
  }
}
</script>
<style lang="css">
.filter-container {
  padding-bottom: 0px;
}
</style>
